<template>
  <div class="props-table">
    <div class="prop-item" v-for="(item, index) in finalProps" :key="index">
      <div class="label" v-if="item.text">{{ item.text }}:</div>
      <div class="prop-component">
        <component
          v-if="item"
          :is="item.component"
          :[item.valueProp]="item.value"
          v-bind="item?.extraProps"
          v-on="item.events"
        >
          <template v-if="item.options">
            <component
              v-for="(option, index) in item.options"
              :key="index"
              :is="item.subComponent"
              :value="option.value"
            >
              <render-v-node :v-node="option.text"></render-v-node>
            </component>
          </template>
        </component>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
export default {
  name: 'PropsTable',
}
</script>
<script setup lang="ts">
import { computed } from 'vue'
import type { TextComponentProps } from '.././defaultProps'
import { mapPropsToForms } from '.././propMap'
import type { VNode } from 'vue'
import { reduce } from 'lodash-es'
import RenderVNode from './RenderVNode'
import ImageSuccess from '@/components/ImageSuccess.vue'
interface FormProps {
  component: string | object
  subComponent?: string
  value: string
  extraProps?: { [key: string]: any }
  text?: string
  options?: { text: string | VNode; value: any }[]
  valueProp: string
  eventName: string
  events: { [key: string]: (e: any) => void }
}
const props = defineProps(['props'])
const emits = defineEmits(['change'])
const finalProps = computed(() => {
  return reduce(
    props.props,
    (result, value, key) => {
      const newKey = key as keyof TextComponentProps
      const item = mapPropsToForms[newKey]
      if (item) {
        const {
          valueProp = 'value',
          eventName = 'change',
          initalTransform,
          afterTransform,
        } = item
        const newItem: FormProps = {
          ...item,
          value: initalTransform ? initalTransform(value) : value,
          valueProp,
          eventName,
          events: {
            [eventName]: (e) => {
              emits('change', {
                key,
                value: afterTransform ? afterTransform(e) : e,
              })
            },
          },
          component:
            item.component === 'image-success' ? ImageSuccess : item.component,
        }
        result[newKey] = newItem
      }
      return result
    },
    {} as { [key: string]: FormProps }
  )
})
</script>

<style scoped>
.prop-item {
  display: flex;
  margin-bottom: 10px;
  align-items: center;
  padding-left: 10px;
}
.label {
  width: 28%;
  color: #666;
}
.prop-component {
  width: 100%;
}
.prop-item.no-text {
  display: inline-block;
  margin: 0 10px 0 0;
}
#item-fontWeight {
  margin-left: 28%;
}
.component-a-select .ant-select {
  width: 150px;
}
:deep(.ant-select) {
  width: 150px;
}
.prop-component.component-shadow-picker,
.prop-component.component-image-processer,
.prop-component.component-background-processer {
  width: 100%;
}
</style>
